<template>
	<view>
		<view class="type type-left">
			<view :class="key == type_index ? 'type-item type-active' : 'type-item'" v-for="(item,key) in types" @click="changeType(key)">{{item.name}}</view>
		</view>
		<view class="type type-right">
			<view class="goods-item" v-for="item in goods_list">
				<view  class="goods-img">
					<image :src="item" mode="scaleToFill"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view style="height: 20upx;"></view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				types:[
					{
						id: 1,
						name : '国际名牌'
					},
					{
						id: 1,
						name : '奢侈品'
					},
					{
						id: 1,
						name : '唯品会'
					},
					{
						id: 1,
						name : '男装'
					},
					{
						id: 1,
						name : '女装'
					},
					{
						id: 1,
						name : '男鞋'
					},
					{
						id: 1,
						name : '女鞋'
					},
					{
						id: 1,
						name : '内衣配饰'
					},
					{
						id: 1,
						name : '箱包手袋'
					},
					{
						id: 1,
						name : '美妆护肤'
					},
					{
						id: 1,
						name : '个护清洁'
					},
					{
						id: 1,
						name : '中标数码'
					},
					{
						id: 1,
						name : '手机数码'
					},
					{
						id: 1,
						name : '电脑办公'
					}
				],
				type_index:0,
				goods_list:[
					"http://img11.360buyimg.com/cms/jfs/t7297/154/3413903491/65679/45ae4902/59e42830N9da56c41.jpg!q95.webp",
					"http://img13.360buyimg.com/n7/jfs/t17929/254/2487840552/282477/67da0c45/5af965d5Nf0a5c1ad.jpg",
					"http://img11.360buyimg.com/n8/jfs/t1/32918/16/1812/302272/5c60ceedE3c6ef844/e994570d93be320f.jpg",
					"http://img14.360buyimg.com/n7/jfs/t21274/342/1514117341/282819/2b315c8c/5b2b2137N227850d3.jpg",
					"http://img12.360buyimg.com/n7/jfs/t1/16267/8/6720/172279/5c637c76Eec54310f/e3c61f7a7992dcd4.jpg",
					"http://img12.360buyimg.com/n7/jfs/t1/7129/16/6388/222716/5be0ed4eE4c290ec2/e41e267d7838c33e.jpg"
				]
			}
		},
		methods:{
			changeType(key) {
				this.type_index = key;
			}
		}
		
	}
</script>

<style>
	.type{position: fixed;height: 100%;overflow-y: auto;top:0;}
	.type-left{width: 180upx;background: #FFFFFF;left:0}
	.type-item{height:100upx;width: 100%;border-bottom: 1upx solid #F1F1F1;text-align: center;line-height: 100upx;color:#666;font-size: 30upx;}
	.type-active{background: #F1F1F1;}
	.type-right{width: calc(100% - 230upx);padding:20upx;left:180upx;}
	.goods-item{background: #FFFFFF;margin-bottom: 20upx;width: calc(100% - 40upx);padding:20upx;box-shadow: 0 1px 1px rgba(26, 26, 26, .2)}
	.goods-img{width: 100%;height:300upx;overflow: hidden;}
	.goods-name{font-size: 30upx;margin-top: 20upx;}
	.goods-set{height:60upx;line-height:60upx}
	.goods-price{color:#F56C6C}
	.add-cart{float:right;color:#F56C6C}
</style>
